<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
</head>
<body>
<div id="app">
  <div>
    姓氏：<input type="text" name="familyName" id="familyName" v-on:keyup.enter="familyNameClicked" v-on:blur="familyNameClicked">
  </div>
  <div>
    名称：<input type="text" name="firstName" id="firstName" v-on:keyup.enter="firstNameClicked" v-on:blur="firstNameClicked">
  </div>

  <div>
    姓名全名：{{ familyName}} {{ firstName }}
  </div>
  <div>
    姓名全名：{{ fullName() }}
  </div>
  <div>
    姓名全名：{{ fullName() }}
  </div>

  <div>
    姓名全名：{{ getFullName }}
  </div>
</div>
<script type="module">
  import {createApp, ref, computed} from "../../../../../js/vue.esm-browser.js";

  const app = createApp({
    setup() {
      let firstName = ref(null)
      let familyName = ref(null)

      function familyNameClicked() {
        let family = document.getElementById("familyName")
        familyName.value = family.value
      }

      function firstNameClicked() {
        let first = document.getElementById("firstName")
        firstName.value = first.value
      }

      function fullName() {
        console.log("调用了 fullName 函数");
        return familyName.value + " " + firstName.value
      }

      let getFullName = computed(()=>{
        console.log("调用了 getFullName ");
        return familyName.value + " " + firstName.value
      })

      return {firstName, familyName, firstNameClicked, familyNameClicked, fullName, getFullName}
    }
  })

  app.mount("#app")
</script>
</body>
</html>